@import 'src/style/mixin';
@keyframes load{
    0%   {transform: translateY(0px);}
    50%  {transform: translateY(-50px);}
    100% {transform: translateY(0px);}
}
@keyframes ellipse{
    0%   {transform: scale(1);}
    50%  {transform: scale(0.3);}
    100% {transform: scale(1);}
}
.component_loading{
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    @include wh(2.5rem, 2.5rem);
    .load_img{
        @include wh(100%, 100%);
        background: url(../../images/icon_loading.png) no-repeat 0 0;
        background-size: 2.5rem auto;
        transform: translateY(0px);
        animation: load .6s infinite ease-in-out;
        position: relative;
        z-index: 11;
    }
    .load_ellipse{
        position: absolute;
        @include wh(2.6rem, 2rem);
        top: 2.2rem;
        left: 0.2rem;
        z-index: 10;
        animation: ellipse .6s infinite ease-in-out;
    }
}
